<template>
  <div>
    <tool-bar nav="" title='集合操作'></tool-bar>
    <el-row :gutter="20" class="grid">
      <el-col :span="7">
        共： {{ txt1_lines.length }} 行
        <el-input type="textarea" v-model="$data.txt1"></el-input>
      </el-col>
      <el-col :span="7">
        共： {{ txt2_lines.length }} 行
        <el-input type="textarea" v-model="$data.txt2"></el-input>
      </el-col>
      <el-col :span="2" class="op_column">
        <el-button @click="union_click">并集</el-button>
        <el-button @click="intersect_click">交集</el-button>
        <el-button @click="minus_click">差集</el-button>
        <el-button @click="fan_minus_click">反差集</el-button>
        <el-button @click="kv_group"><-kv汇总</el-button>
        <el-button @click="eval_tmp_click"> <-eval-js</el-button>
        <el-button @click="eval_click"> eval-js-></el-button>
      </el-col>
      <el-col :span="7">
        共： {{ txt3_lines.length }} 行
        <el-input type="textarea" v-model="$data.txt3"></el-input>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>

.grid {
  position: relative;
  margin-left: 20px !important;
  margin-top: 20px !important;

  display: flex;

  ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
    min-height: 60vh !important;
    height: 70vh;
  }
}

.op_column {
  padding-top: 150px;
  padding-bottom: 150px;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  align-content: space-around;
  position: relative;


  button {
    display: block;
    margin: 5px 2px;
  }

  .el-button + .el-button {
    margin-left: 0;
  }
}

</style>
<script setup>
/**
 * Created by CodeGenerator
 */


defineOptions({
  name: "array-js",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({"txt1": "", "txt2": "", "txt3": ""});


const $props = defineProps({});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const txt1_lines = $computed(function () {
  return $data.txt1.split("\n").filter(it => it).map(it => it.trim());
});
const txt2_lines = $computed(function () {
  return $data.txt2.split("\n").filter(it => it).map(it => it.trim());
});
const txt3_lines = $computed(function () {
  return $data.txt3.split("\n").filter(it => it).map(it => it.trim());
});

const union_click = function () {
  jv.$saveData("txt1", $data.txt1);
  jv.$saveData("txt2", $data.txt2);
  $data.txt3 = Array.from(new Set(txt1_lines.concat(txt2_lines))).join("\n");
};
const intersect_click = function () {
  jv.$saveData("txt1", $data.txt1);
  jv.$saveData("txt2", $data.txt2);
  $data.txt3 = txt1_lines.intersect(txt2_lines).join("\n");
};
const minus_click = function () {
  jv.$saveData("txt1", $data.txt1);
  jv.$saveData("txt2", $data.txt2);
  $data.txt3 = txt1_lines.minus(txt2_lines).join("\n");
};
const fan_minus_click = function () {
  jv.$saveData("txt1", $data.txt1);
  jv.$saveData("txt2", $data.txt2);
  $data.txt3 = txt2_lines.minus(txt1_lines).join("\n");
};

const kv_group = function () {
  $data.txt2 = `
// lines变量表示左边内容的行数组
// text变量表示左边内容
// json变量表示左边对象

var keys =  Object.keys(json);
var values = Object.values(json);

var ret = keys.concat(values)
  .groupBy(it=>it)
  .filter(it => it.data.length > 1)
  .map(it => {
    return it.key + ": " + it.data.length;
  })
  .join("\\n");

return ret;
`
};
const eval_tmp_click = function () {
  var d = 0;
  $data.txt2 = `
// lines变量表示左边内容的行数组
// text变量表示左边内容
// json变量表示左边对象

return lines
  .filter(it => it)
  .map(it => {
    return it + ";"
  })
  .join("\\n");
`;
};
const eval_click = function () {
  jv.$saveData("txt1", $data.txt1);
  jv.$saveData("txt2", $data.txt2);
  var json = null;
  try {
    var exp = "t =>{ return " + $data.txt1 + "} "
    json = eval(exp)();
  } catch (e) {
  }

  try {
    var retValue = eval("(lines,text,json) => { " + $data.txt2 + " }")(
        txt1_lines,
        $data.txt1,
        json);
    if (jv.isNull(retValue)) {
      $data.txt3 = "";
    } else {
      $data.txt3 = retValue.toString()
    }

  } catch (e) {
    jv.error(e.message);
    console.error(e);

    $data.txt3 = e.stack;
  }
};

onMounted(function () {
  jv.$loadData("txt1", v => $data.txt1 = v);
  jv.$loadData("txt2", v => $data.txt2 = v);
})


</script>
